<template>
  <div class="crud-container">
    <div class="header">
      <div class="input">
        <span>数据表名</span>
        <ElInput v-model="crudCreateForm.name"></ElInput>
      </div>
      <div class="input">
        <span>数据表注释</span>
        <ElInput v-model="crudCreateForm.comment"></ElInput>
      </div>
      <div class="input">
        <span>数据库</span>
        <ElSelect style="width: 200px" v-model="crudCreateForm.database">
          <ElOption
            v-for="item in databases"
            :key="item"
            :label="item"
            :value="item"
          />
        </ElSelect>
      </div>
      <div style="margin-left: auto">
        <ElButton type="primary">生成</ElButton>
        <ElButton @click="advancedConfigVisible = true">高级配置</ElButton>
      </div>
    </div>
    <div class="fields_main">
      <!-- 字段选择 -->
      <div class="fields_select fields">
        <ElScrollbar>
          <div class="field_btns">
            <div
              v-for="field in optionalFields"
              :key="field.id"
              class="field_btn"
              @click="handleAddField(field)"
            >
              {{ field.label }}
            </div>
          </div>
        </ElScrollbar>
      </div>
      <!-- 已选字段 -->
      <div class="fields_content fields">
        <ElScrollbar :class="selectFields.length ? '' : 'empty'">
          <div ref="selectFieldsRef" class="select_content">
            <VueDraggable
              v-model="selectFields"
              handle=".drag"
              :animation="300"
            >
              <div
                v-for="(item, index) in selectFields"
                :key="item.id"
                class="field_item"
                :class="activeIndex === index ? 'active' : ''"
                @click.stop="handleClickField(item, index)"
              >
                <ElIcon size="18" class="drag">
                  <Rank />
                </ElIcon>
                <ElFormItem label="字段名">
                  <ElInput v-model="item.fieldName" />
                </ElFormItem>
                <ElFormItem label="字段注释">
                  <ElInput v-model="item.comment" />
                </ElFormItem>
                <ElFormItem>
                  <ElButton
                    type="danger"
                    icon="Delete"
                    circle
                    @click="handleDeleteField(item, index)"
                  />
                </ElFormItem>
              </div>
            </VueDraggable>
          </div>
        </ElScrollbar>
      </div>
      <!-- 字段配置 -->
      <div class="fields_config fields">
        <div class="fields_config__content" v-if="currentField">
          <ElForm>
            <ElDivider>公共配置</ElDivider>
            <ElFormItem label="字段名">
              <ElInput v-model="currentField.fieldName" />
            </ElFormItem>
            <ElFormItem label="字段注释">
              <ElInput type="textarea" v-model="currentField.comment" />
            </ElFormItem>
            <ElFormItem label="字段类型(数据库类型)">
              <ElSelect filterable clearable v-model="currentField.type">
                <ElOption
                  v-for="type in databaseFieldType"
                  :key="type"
                  :label="type"
                  :value="type"
                ></ElOption>
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="字段默认值">
              <ElSelect v-model="currentField.defaultValue">
                <ElOption label="NULL" value="null"></ElOption>
                <ElOption label="空字符串" value=""></ElOption>
                <ElOption label="0" :value="0"></ElOption>
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="字段属性">
              <ElCheckboxGroup
                v-model="currentField.prop"
                @change="handlePropChange"
              >
                <ElCheckbox value="PRIMARY_KEY">主键</ElCheckbox>
                <ElCheckbox
                  value="AUTO_INCREMENT"
                  :disabled="!currentField.prop.includes('PRIMARY_KEY')"
                  >自动递增</ElCheckbox
                >
                <ElCheckbox
                  value="UNSIGNED"
                  :disabled="currentField.prop.includes('PRIMARY_KEY')"
                  >无符号</ElCheckbox
                >
                <ElCheckbox
                  value="NULL"
                  :disabled="currentField.prop.includes('PRIMARY_KEY')"
                  >允许NULL</ElCheckbox
                >
              </ElCheckboxGroup>
            </ElFormItem>
            <ElFormItem label="字段排序">
              <ElSwitch v-model="currentField.sort" />
            </ElFormItem>
            <ElFormItem label="搜索验证规则">
              <ElSelect>
                <ElOption label="必填" value="required"></ElOption>
                <ElOption label="数字" value="number"></ElOption>
                <ElOption label="整数" value="integer"></ElOption>
                <ElOption label="邮箱" value="email"></ElOption>
                <ElOption label="自定义正则" value=""></ElOption>
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="公共搜索操作符">
              <ElSelect>
                <ElOption label="eq =" value="="></ElOption>
                <ElOption label="gt >" value=">"></ElOption>
                <ElOption label="egt >=" value=">="></ElOption>
                <ElOption label="lt <" value="<"></ElOption>
                <ElOption label="elt" value="<="></ElOption>
                <ElOption label="LIKE" value="LIKE"></ElOption>
                <ElOption label="NOT LIKE" value="NOT LIKE"></ElOption>
                <ElOption label="IN" value="IN"></ElOption>
                <ElOption label="NOT IN" value="NOT IN"></ElOption>
                <ElOption label="RANGE" value="RANGE"></ElOption>
                <ElOption label="NOT RANGE" value="NOT RANGE"></ElOption>
                <ElOption label="NULL" value="NULL"></ElOption>
                <ElOption label="NOT NULL" value="NOT NULL"></ElOption>
              </ElSelect>
            </ElFormItem>
          </ElForm>
        </div>
      </div>
    </div>
    <Dialog title="高级配置" v-model="advancedConfigVisible">
      <ElForm :model="crudCreateForm" label-width="150px">
        <ElFormItem label="表格快速搜索字段">
          <ElInput v-model="crudCreateForm.quickSearchField" />
        </ElFormItem>
        <ElFormItem label="表格默认排序字段">
          <div style="display: flex">
            <ElInput v-model="crudCreateForm.orderField" />
            <ElSelect v-model="crudCreateForm.orderType">
              <ElOption label="升序 - asc" value="asc" />
              <ElOption label="降序 - desc" value="desc" />
            </ElSelect>
          </div>
        </ElFormItem>
        <ElFormItem label="表格列字段">
          <ElSelect v-model="crudCreateForm.tableColums" multiple>
            <ElOption
              v-for="item in selectFields"
              :label="`${item.label} - ${item.fieldName}`"
              :value="item.fieldName"
              :key="item.id"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="搜索表单项字段">
          <ElSelect v-model="crudCreateForm.searchFormFields" multiple>
            <ElOption
              v-for="item in selectFields"
              :label="`${item.label} - ${item.fieldName}`"
              :value="item.fieldName"
              :key="item.id"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="新增表单项字段">
          <ElSelect v-model="crudCreateForm.addFormFields" multiple>
            <ElOption
              v-for="item in selectFields"
              :label="`${item.label} - ${item.fieldName}`"
              :value="item.fieldName"
              :key="item.id"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="编辑表单项字段">
          <ElSelect v-model="crudCreateForm.editFormFields" multiple>
            <ElOption
              v-for="item in selectFields"
              :label="`${item.label} - ${item.fieldName}`"
              :value="item.fieldName"
              :key="item.id"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="后端生成代码路径">
          <ElInput v-model="crudCreateForm.backendCodePath" />
        </ElFormItem>
        <ElFormItem label="生成控制器位置">
          <ElInput v-model="crudCreateForm.controllerPath" />
        </ElFormItem>
        <ElFormItem label="生成模型位置">
          <ElInput v-model="crudCreateForm.modelPath" />
        </ElFormItem>
        <ElFormItem label="生成service位置">
          <ElInput v-model="crudCreateForm.servicePath" />
        </ElFormItem>
        <ElFormItem label="前端视图目录">
          <ElInput v-model="crudCreateForm.frontViewsPath" />
        </ElFormItem>
        <ElFormItem label="前端路由路径">
          <ElInput v-model="crudCreateForm.frontRoutePath" />
        </ElFormItem>
      </ElForm>
    </Dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { VueDraggable } from "vue-draggable-plus";
import Dialog from "@/components/Basic/Dialog/index.vue";
import { computed } from "vue";
import { FIELD_TYPE } from "./crud";
// type 1常用 2基础
const activeIndex = ref(-1);
const advancedConfigVisible = ref(false);
const crudCreateForm = ref({
  name: "TableName",
  comment: "Table Comment",
  database: "mysql",
  quickSearchField: "", // 快速搜索字段
  orderField: "", // 排序字段
  orderType: "", // 排序类型 升序/降序
  backendCodePath: "", // 后端代码路径
  controllerPath: "", // 控制器路径
  servicePath: "", // 服务路径
  modelPath: "", // 模型路径
  frontViewsPath: "", // 前端视图路径
  frontRoutePath: "", // 前端路由路径
  tableColums: [], // 表格列字段配置
  addFormFields: [], // 新增表单项时字段
  editFormFields: [], // 修改表单项时字段
  searchFormFields: [], // 查询表单项时字段
  tableFields: [], // 表格字段
});
const currentField = ref(null);
const defaultFieldConfig = ref({});
// 字段
const optionalFields = ref([
  {
    id: 1,
    type: 1,
    label: "主键",
    prop: "id", // 前端映射的属性
    fieldName: "id", // 后端字段名
    comment: "ID",
    single: true,
    type: "int",
  },
  {
    id: 2,
    type: 1,
    label: "状态",
    prop: "switch",
    fieldName: "status",
    comment: "状态:0=禁用,1=启用",
    type: "tinyint",
  },
  {
    id: 6,
    type: 2,
    label: "字符串",
    prop: "input",
    fieldName: "string",
    comment: "字符串",
  },
  {
    id: 7,
    type: 2,
    label: "图片",
    prop: "upload",
    fieldName: "image",
    comment: "图片",
  },
  {
    id: 8,
    type: 2,
    label: "文件上传",
    prop: "upload",
    fieldName: "file",
    comment: "文件上传",
  },
  {
    id: 9,
    type: 2,
    label: "单选框",
    prop: "radio",
    fieldName: "radio",
    comment: "复选框",
  },
  {
    id: 10,
    type: 2,
    label: "复选框",
    prop: "checkbox",
    fieldName: "checkbox",
    comment: "复选框",
  },
  {
    id: 11,
    type: 2,
    label: "下拉框",
    prop: "select",
    fieldName: "select",
    comment: "下拉框",
  },
  {
    id: 12,
    type: 2,
    label: "开关",
    prop: "switch",
    fieldName: "switch",
    comment: "开关",
  },
  {
    id: 13,
    type: 2,
    label: "富文本",
    prop: "editor",
    fieldName: "editor",
    comment: "富文本",
  },
  {
    id: 14,
    type: 2,
    label: "多行文本框",
    prop: "textarea",
    fieldName: "textarea",
    comment: "多行文本框",
  },
  {
    id: 15,
    type: 2,
    label: "数字",
    prop: "number",
    fieldName: "number",
    comment: "数字",
  },
  {
    id: 16,
    type: 2,
    label: "浮点数",
    prop: "float",
    fieldName: "float",
    comment: "浮点数",
  },
  {
    id: 17,
    type: 2,
    label: "密码",
    prop: "input",
    fieldName: "password",
    comment: "密码",
  },
  {
    id: 17,
    type: 2,
    label: "日期",
    prop: "date",
    fieldName: "date",
    comment: "日期",
  },
  {
    id: 18,
    type: 2,
    label: "时间",
    prop: "time",
    fieldName: "time",
    comment: "时间",
  },
  {
    id: 19,
    type: 2,
    label: "时间日期",
    prop: "datetime",
    fieldName: "datetime",
    comment: "时间日期",
  },
  {
    id: 20,
    type: 2,
    label: "年份",
    prop: "year",
    fieldName: "year",
    comment: "年份",
  },
  {
    id: 21,
    type: 2,
    label: "月份",
    prop: "month",
    fieldName: "month",
    comment: "月份",
  },
  {
    id: 22,
    type: 2,
    label: "时间戳",
    prop: "datetime",
    fieldName: "timestamp",
    comment: "时间戳",
  },
  {
    id: 23,
    type: 2,
    label: "数组",
    prop: "array",
    fieldName: "array",
    comment: "数组",
  },
]);
const databases = ref(["mysql", "mongodb", "sqlserver"]);
const selectFields = ref([]);
const databaseFieldType = computed(() => {
  switch (crudCreateForm.value.database) {
    case "mysql":
      return FIELD_TYPE.mysqlFieldType;
    case "mongodb":
      return FIELD_TYPE.mongodbFieldType;
    case "sqlserver":
      return FIELD_TYPE.sqlserverFieldType;
  }
});
function handleAddField(field) {
  const addModel = {
    ...field,
    sort: false,
    defaultValue: "",
    searchRule: [],
    prop: [],
  };
  selectFields.value.push(addModel);
}

function handlePropChange(val) {
  if (val.includes("PRIMARY_KEY")) {
    currentField.value.prop = val.filter(
      (item) => item !== "NULL" && item !== "UNSIGNED"
    );
  } else {
    currentField.value.prop = val.filter((item) => item !== "AUTO_INCREMENT");
  }
}

function handleDeleteField(item, index) {
  selectFields.value.splice(index, 1);
}

function handleClickField(item, index) {
  activeIndex.value = index;
  currentField.value = item;
}
</script>

<style scoped src="./index.css"></style>
